import React, { useEffect, useState } from "react";
import s from './task_report.module.css'
import cn from 'classnames'
import { initECharts } from "./initEChartsOptions";
import Table from '@knownsec/react-component/dist/Table'
import Input from '@knownsec/react-component/dist/Input'
import Button from '@knownsec/react-component/dist/Button'
import Message from '@knownsec/react-component/dist/Message'
import ECharts from "./echarts";
import { getParams, turnToUrlparam } from './../helpers/getUrlParams';
import EmptyData from '../components/empty/EmptyData';
import fetch from 'API/fetch';

import Progress from '@knownsec/react-component/dist/Progress'
const levelNumMap = {
	严重: 5,
	高危: 4,
	中危: 3,
	低危: 2,
	安全: 1,
}
const warningTipMap = {
	// 服务开通，部分无结果
	0: {
		web_1: '未进行安全监测，为了您的资产安全，平台建议您持续监测资产安全风险。',
		web_2: '未进行安全监测，为了您的资产安全，平台建议您持续监测资产安全风险。',
		ava: '未进行可用性监测，平台建议您持续监测资产可用性状态。',
	},
	// 服务开通，全无结果
	1: {
		web_1: '未启用监测项，平台建议您立即前往控制台下发监测任务。',
		web_2: '未启用该监测项，平台建议您立即前往控制台下发监测任务。',
		ava: '未启用该监测项，平台建议您立即前往控制台下发监测任务。',
	},
	// 服务未开通
	2: {
		web_1: '未开通监测服务，建议您购买服务，为您提供全方位安全监测服务。',
		web_2: '未开通Web安全监测服务，建议您购买服务，为您提供全方位安全监测服务。',
		ava: '未开通可用性监测服务，建议您购买服务，为您提供7x24小时高频持续监测，实时掌握资产可用性状态。',
	}
}
const webGoodStatusMap = {
	web_1: 'Web安全监测异常，请立即前往控制台查看详情。',
	web_2: '该监测项异常，请立即前往控制台查看详情。'
}
const levelTextMap = {
	critical: '严重',
	high: '高危',
	medium: '中危',
	low: '低危',
	safe: '安全',
}
const levelList = ['critical', 'high', 'medium', 'low']
const taskMap = {
	vul: '漏洞',
	ssl: 'SSL威胁',
	securityEvent: '安全事件',
	content: '内容违规'
}
const taskList = [
	{ label: 'Web漏洞', value: 'vul' },
	{ label: 'SSL威胁', value: 'ssl' },
	{ label: '安全事件', value: 'securityEvent' },
	{ label: '内容违规', value: 'content' }
]
function toThousands(num) {
  return num?.toString()?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') || 0;
}
function TaskReport () {
	const [id, setId] = useState(getParams(false, window.location.href, 'string')?.id || '')
	const [username, setUsername] = useState(getParams(false, window.location.href, 'string')?.username || '')
	const [type, setType] = useState(0)
	const [levelMap, setLevelMap] = useState([
		{ dataIndex: 'critical', label: '严重', color: '#A00000', count: 0 },
		{ dataIndex: 'high', label: '高危', color: '#E01010', count: 0 },
		{ dataIndex: 'medium', label: '中危', color: '#F5A623', count: 0 },
		{ dataIndex: 'low', label: '低危', color: '#F8E71C', count: 0 },
		{ dataIndex: 'safe', label: '安全', color: '#11AB4E', count: 0 },
	])
	const [top1Asset, setTop1Asset] = useState({
		name: { label: '资产名称', value: '' },
		target_url: { label: '资产地址', value: '' },
		level: { label: '风险值/等级', value: '', level: 5 },
		result: { label: '威胁类型', value: '' },
	})
	const linkTo = (link) => {
		window.location.href = '/#' + link
		window.location.reload()
	}
	const colum = [
		{
			title: `资产名称`,
			dataIndex: "name",
			key: "name",
			render (e, row, index) {
				return (
					<div className={cn(s.avaTopItem, s['avaTopItem' + (index+1)])}>{e}</div>
				)
			},
		},
		{
			title: `资产地址`,
			dataIndex: "target_url",
			key: "target_url",
			render (e) {
				return <div className="ell" title={e}>{e}</div>
			},
		},
		{
			title: `平均可用率`,
			dataIndex: "ava_avg",
			key: "ava_avg",
			width: 80,
			render (e) {
				return e + '%'
			},
		},
		{
			title: `平均响应时间`,
			dataIndex: "resp_avg",
			key: "resp_avg",
			width: 140,
			render (e) {
				return e + 'ms'
			},
		}
	]
	const [webAvailableTaskData, setWebAvailableTaskData] = useState([])
	const kbColumns = [
		{
			title: `漏洞名称`,
			dataIndex: "name",
			key: "name",
			render (e) {
				return (
					<div className='ell' title={e}>{e}</div>
				)
			},
		},
		{
			title: `漏洞类型`,
			dataIndex: "type",
			key: "type",
			width: 400,
			render (e) {
				return (
					<div className='ell' title={e}>{e}</div>
				)
			},
		},
		{
			title: `漏洞等级`,
			dataIndex: "level",
			key: "level",
			width: 100,
			render (e, {severity}) {
				return (
					<div className={cn('level-item level_' + severity, 'fw700')}>{e}</div>
				)
			},
		},
	]
	const [kbData, setKbData] = useState({ total: 0, tableData: [] })
	const [overviewData, setOverviewData] = useState(null)
	const [assetStatusData, setAssetStatusData] = useState(null)
	const [webSecTaskData, setWebSecTaskData] = useState(null)
	const [hasUser, setHasUser] = useState(-1)
	const [taskType, setTaskType] = useState({ web: true, ava: true })
	const getAvaTaskData = async () => {
		if (!username) {
			setHasUser(0);
			return false
		} else {
			const params = {
				id,
				username
			}
			window.location.href = '#/report/task_report/?' + turnToUrlparam(params)
		}
		const resD = await fetch(`/api/v2/push_report/data/${id}?username=${username}`, {
			method: 'GET',
		}).catch(err => {
			setHasUser(0)
			Message.show({ type: 'error', message: err.message || err.msg })
		});
		if (resD?.code === 200) {
			setHasUser(1)
			const { is_free_user, completed_task_type, enable_task_map, web_sec_task_data, asset_risk_data, asset_status_data, web_available_task_data, kb_data, overview_data, username, start_time, end_time } = resD?.results
			setKbData({ total: kb_data?.count || 0, tableData: kb_data?.detail || [] })
			setOverviewData({
				...overview_data,
				username,
				start_time,
				end_time,
				ava_total_count: overview_data?.completed_task_count?.ping + overview_data?.completed_task_count?.http
			})
			setAssetStatusData(asset_status_data)
			// 区分场景 套餐[is_free_user] 结果[completed_task_type] 监测项开启[enable_task_map]
			if (!is_free_user) {
				const { web_ava, web_sec } = overview_data?.enable_balance //是否开通服务
				// const web_ava = false
				// const web_sec = true //是否开通服务
				const webStatus = Object.keys(taskMap)?.reduce((t, k) => {
					if (!t) t = completed_task_type[k]
					return t
				}, false)
				const avaStatus = ['ping', 'http'].reduce((t, k) => {
					if (!t) t = completed_task_type[k]
					return t
				}, false)
				const webGoodStatus = Object.keys(taskMap)?.reduce((t, k) => {
					if (!t) t = web_sec_task_data?.good_sec_task_map[k]
					return t
				}, false)
				if ((webStatus || avaStatus) && web_ava && web_sec) { //场景1 服务全开通，部分或全部有结果
					setType(0)
				} else if (!webStatus && !avaStatus && web_ava && web_sec) { // 场景4 服务全开通，全无结果
					setType(1)
				} else if (web_ava || web_sec) { // 场景6 可开通服务，但部分未开通
					setType(2)
				}
				setTaskType({ web: webStatus, ava: avaStatus, webGoodStatus })
				const watd = web_available_task_data.map(item => {
					// 防止精度丢失
					item.ava_avg = Number(item.ava_avg) * 1000 / 10
					return item
				}).sort((a, b) => a.ava_avg - b.ava_avg)
				setWebAvailableTaskData(watd)
				const asdTotal = levelMap.reduce((t, i) => {
					t += asset_risk_data[i.dataIndex]
					return t
				}, 0)
				const asd = levelMap.map((item, index) => {
					const percent_ = asset_risk_data[item.dataIndex] > 0 ? (asset_risk_data[item.dataIndex] / asdTotal * 100).toFixed(1) : 0
					return {
						...item,
						percent: percent_,
						count: asset_risk_data[item.dataIndex]
					}
				})
				const asdTop1 = Object.keys(top1Asset).reduce((t, k) => {
					t[k] = {
						...top1Asset[k],
						value: asset_risk_data?.top_risk_job?.[k]
					}
					if (k === 'level') {
						t[k].value = asset_risk_data?.top_risk_job?.score + '分/' + asset_risk_data?.top_risk_job?.level
						t[k].level = levelNumMap[asset_risk_data?.top_risk_job?.level]
					}
					if (k === 'result') {
						const total = asset_risk_data?.top_risk_job?.risk_names?.length
						t[k].value = asset_risk_data?.top_risk_job?.risk_names?.slice(0, 2)?.join(', ') + (total > 2 ? '等' : '')
					}
					if (asset_risk_data?.top_risk_job?.level === '未知') {
						t[k].value = ''
					}
					return t
				}, {})
				setTop1Asset(asdTop1)
				setLevelMap(asd)
				const levelCountList = {}
				const levelCountTotalList = []
				const rightData_ = levelList.reduce((t, i, index) => {
					levelCountList[i] = taskList?.reduce((r, k) => {
						r.push(web_sec_task_data?.task_type_map?.[k.value]?.[i + '_count'] || 0)
						return r
					}, [])
					Object.entries(web_sec_task_data?.task_type_map)?.map(([k, item]) => {
						t[i] = t[i] || []
						t[i]?.push({ label: k, value: item[i] || []})
					})
					t[i] = t[i]?.sort((a, b) => b.value.length - a.value.length)
					if (t[i]?.[0]?.value?.length === 0) delete t[i]
					return t
				}, {})
				const r_ = ['vul', 'securityEvent'].reduce((t, i) => {
					t[i] = { count: 0, data: [] }
					let levelDataCount = 0
					levelList.map(level => {
						if (web_sec_task_data?.task_type_map[i]?.[level]?.length > 0) {
							t[i].count += web_sec_task_data?.task_type_map[i]?.[level]?.length
							if (levelDataCount < 2) {
								const item = web_sec_task_data?.task_type_map[i][level]?.slice(0, 2 - levelDataCount)
								item[0] = levelTextMap[level]+ ': ' + item[0]
								if (item[1]) item[1] = '<span style="padding-left: 32px"><span>' + item[1]
								t[i].data = t[i].data.concat(item)
								levelDataCount += web_sec_task_data?.task_type_map[i][level]?.slice(0, 2 - levelDataCount).length
							}
						}
					})
					return t
				}, {})
				const rightData = levelList.reduce((t, i) => {
					if (rightData_[i]) {
						const value = rightData_[i][0]?.value?.length > 3 ? rightData_[i][0]?.value?.slice(0, 2).concat('……') : rightData_[i][0]?.value
						t.push({ label: levelTextMap[i] + taskMap[rightData_[i][0]?.label], data: value })
					}
					return t
				}, [])
				new Array(4).fill('').map((i, index) => {
					const total = levelList.reduce((t, i) => {
						t += levelCountList[i][index]
						return t
					}, 0)
					levelCountTotalList.push(total)
				})
				setWebSecTaskData({
					...web_sec_task_data,
					totalList: levelCountTotalList,
					leftData: levelCountList,
					rightData: r_,
				})
			}
		}
	}
	useEffect(() => {
		if (!id) {
			window.location.href = '/'
		} else {
			getAvaTaskData()
		}
	}, [])
	useEffect(() => {
		const mvp = document.getElementById('changeScale');
		if (hasUser === 0) {
			mvp.setAttribute('content','initial-scale=1');
		} else if(hasUser === 1) {
			mvp.setAttribute('content','initial-scale=0.25');
		}
		return () => {
			mvp.setAttribute('content','initial-scale=0.25');
		}
	}, [hasUser])
	return hasUser > 0 ? <div className={cn(s.reportBox)}>
		<div className={cn(s.reportContent)}>
			<div className={cn(s.h192, 'white-color tac w100p df jcc fdc')}>
				<div className={cn(s.fs36, 'fw700 mt30')}>ScanV 安全监测报告</div>
				{overviewData?.start_time && <div className="fs20">{overviewData?.start_time} - {overviewData?.end_time}</div>}
			</div>
			<div className={cn(s.minH128, 'mt20 mb20 df aifs')}>
				<div className={cn(s.typeIcon, s['type_' + type], 'mr20')}></div>
				<div className="flex1">
					<div className={cn('fs20 fw700 black-line-color')}>Hi，尊敬的{overviewData?.username}用户：</div>
					<div className={cn('bgwh pl16 pr16 pt10 pb10 mt10', s.minH60)}>
						<div className="fs18 fw700 black-line-color">ScanV 已为您持续监测服务<span className="main-color fs24"> {toThousands(assetStatusData?.duration_time || 0)} </span>天，对您的<span className="main-color fs24"> {toThousands(webSecTaskData?.web_sec_job_count || 0)}  </span>个资产持续安全监测<span className="main-color fs24"> {toThousands(webSecTaskData?.web_sec_scan_count || 0)}  </span>次。</div>
						<div className="black-line-color fs14 mt5">当前已接入资产<span className="main-color"> {toThousands(assetStatusData?.used_domain_count || 0)}  </span>个，剩余可接入资产<span className="main-color"> {toThousands((assetStatusData?.free_count < 0 ? 0 : assetStatusData?.free_count) || 0)} </span>个，服务有效期至 {assetStatusData?.expire_time || '- -'}。</div>
					</div>
				</div>
			</div>
			<div className={cn(s.h312, s.pb32, 'bgwh pl24 pr24 pt16 df fdc')}>
				<div className={cn('black-line-color fs20 fw700')}>资产状态</div>
				<div className="flex1 df aifs mt10">
					<div className="bd h100p w50p mr20">
						<ECharts key={1} option={initECharts({
							title: `资产\n\n最新状态`,
							color: ['#0B6FD6', '#FAAF2B'].map(i => { return { color1: i } }),
							options: option => {
								option.title.textStyle.fontSize = 16
								option.title.left = '27%'
								option.title.backgroundColor = '#fff'
								option.legend.show = false
								const colorList = ['#0B6FD6', '#FAAF2B']
								option.series[0].center = ['28%', '50%']
								option.series[0].radius = ['50%', '60%']
								option.tooltip = { show: false }
								option.series[0].data.map((item, index) => {
									let labelFormatter = '{icon|} {name|{b}: }{c} ({d}%)'
									if (item.name === '未监测' && assetStatusData?.not_verified_asset_count > 0) {
										const nvac_percent = (assetStatusData?.not_verified_asset_count / assetStatusData?.not_monitor_asset_count * 100).toFixed(2)
										labelFormatter += `\n{sub|- 其中待认证 ${assetStatusData?.not_verified_asset_count || 0} (${nvac_percent}%)}`
									}
									item.labelLine = {
										show: false
									}
									item.label = {
										show: true,
										formatter: labelFormatter,
										distanceToLabelLine: 50,
										lineHeight: 20,
										rich: {
											icon: {
												width: 8,
												height: 8,
												fontSize: 0,
												borderRadius: 6,
												backgroundColor: colorList[index]
											},
											sub: {
												color: '#999',
												padding: [0, 0, 0, 14]
											}
										}
									}
									item.emphasis = {
										labelLine: {
											show: false
										},
										label: {
											show: true,
											fontSize: 12,
											distanceToLabelLine: 50,
										}
									}
								})
								option.series[0].labelLayout = function (params) {
									return {
										x: 260,
										y: params.dataIndex * 36 + 80,
										width: 140,
										align: 'left',
										moveOverlap: 'shiftY'
									}
								}
								return option
							},
							dataKey: [
								{ name: '监测中', dataIndex: 'enable', value: assetStatusData?.monitor_asset_count || 0 },
								{ name: '未监测', dataIndex: 'unenable', value: assetStatusData?.not_monitor_asset_count || 0 },
							]
						}, 'pie')} />
					</div>
					<div className="w50p black-line-color df jcse fdc h100p">
						<div className={cn(s.assetsItem)}>周期内Web安全监测任务执行<span className="fs18 main-color fw700"> {toThousands(assetStatusData?.web_sec_task_count || 0)} </span>次，发现风险资产<span className="error-color fs20 fw700"> {toThousands(assetStatusData?.sec_risk_asset_count || 0)} </span>个</div>
						<div className={cn(s.assetsItem)}>周期内可用性监测任务执行<span className="fs18 main-color fw700"> {toThousands(assetStatusData?.available_task_count || 0)} </span>次，发现访问异常资产<span className="error-color fs20 fw700"> {toThousands(assetStatusData?.available_risk_asset_count || 0)} </span>个</div>
					</div>
				</div>
			</div>
			<div className={cn(s.minH336, {[s.h336]: type !== 4 && taskType?.web && (taskType?.webGoodStatus || webSecTaskData?.risk_count)}, {[s.h402]: !taskType?.webGoodStatus && !webSecTaskData?.risk_count}, 'bgwh pl24 pr24 pt16 df fdc pb16 mt24')}>
				<div className={cn('black-line-color fs20 fw700')}>风险分布</div>
				{type !== 4 && taskType?.web ? <div className="flex1 mt10 df fdc">
					{!taskType?.webGoodStatus && !webSecTaskData?.risk_count && <div className={cn(s.warningTip, 'mb16')}>{webGoodStatusMap?.web_1}</div>}
					<div className="df aifs flex1">
						<div className="bd h100p w50p pt16 pl12 pr12 pb16 df fdc jcsb">
							{levelMap.map(item => {
								return <div className="df aic pl10">
									<span className="w40 black-line-color">{item.label}</span>
									<Progress className={cn('ml10 mr10 w320')} percent={item.percent + '%'} color={item.color} />
									<span>{item.count > 99 ? '99+' : item.count}个 ({item.percent}%)</span>
								</div>
							})}
						</div>
						<div className="w50p ml20 black-line-color df jcsb fdc h100p bg-color bsbb pt16 pb16 pl24 pr24">
							<div className={cn(s.assetTop1, 'fs16 fw700')}>高风险资产</div>
							{Object.entries(top1Asset).map(([key, item]) => {
								return <div className={cn("df", {'aifs': key === 'result', 'aic': key !== 'result'})}>
									<span className={cn(s.w90)}>{item.label}: </span>
									<span className={cn({"flex1 fww": !item.level}, {['report_level_' + item.level + '_item']: item.level}, 'ell')} title={item.value}>{item.value || '- -'}</span>
								</div>
							})}
						</div>
					</div>
					<div className="mt10">
						*更多资产风险信息，请<span className="main-color cp" onClick={() => linkTo('/')}>前往控制台</span>查看
					</div>
				</div> : <div className="flex1 df fdc">
					<div className={cn(s.warningTip)}>{warningTipMap[type].web_1}</div>
					<div className={cn(s.webEmpty1, 'mt16 bg-color')}></div>
				</div>}
			</div>
			<div className={cn(s.minH336, {[s.h336]: type !== 4 && taskType?.web && (taskType?.webGoodStatus || webSecTaskData?.risk_count)}, {[s.h402]: !taskType?.webGoodStatus && !webSecTaskData?.risk_count}, 'bgwh pl24 pr24 pt16 df fdc pb16 mt24')}>
				<div className={cn('black-line-color fs20 fw700')}>Web 安全监测</div>
				{type !== 4 && taskType?.web ? <div className="flex1 mt10 df fdc">
					{!taskType?.webGoodStatus && !webSecTaskData?.risk_count && <div className={cn(s.warningTip, 'mb16')}>{webGoodStatusMap?.web_2}</div>}
					<div className="df aifs flex1">
						<div className="bd h100p w50p pt10 pl16 pr16 pb10 df fdc jcsb">
							<ECharts className='flex1 pb10' key='high-vu-count' option={initECharts({
								color: ['#BB0707', '#FF0000', '#F67E23', '#FED831'].map(i => { return { color1: i }}),
								options: op => {
									op.legend = { show: false }
									op.xAxis.type = 'category'
									op.xAxis.show = true
									op.yAxis.show = false
									op.yAxis.type = 'value'
									op.tooltip = { show: false }
									const totalTop = webSecTaskData?.totalList?.reduce((t, i) => {
										if (i > t) t = i
										return t
									}, 0)
									op.grid.left = '-5%'
									op.xAxis.data = ['Web漏洞', 'SSL威胁', '安全事件', '内容违规']
									op.series?.map((item, k) => {
										item.barWidth = 50
										item.showBackground = true
										item.backgroundStyle = {
											color: '#E6EAEF'
										}
										item.data = item.data?.map(i => {
											return {
												value: i < Math.ceil(totalTop * 0.15) && i !== 0 ? Math.ceil(totalTop * 0.15) : i,
												realValue: i
											}
										})
										item.label = {
											...item.label,
											color: '#fff',
											position: 'inside',
											align: 'center',
											verticalAlign: 'center',
											overflow: 'truncate',
											width: 40,
											formatter: function (params) {
												// return params.data.realValue ? '999999' : ''
												return params.data.realValue || ''
											}
										}
										return item
									})
									return op
								},
								dataKey: [
									{ name: '严重', stack: 'total', value: webSecTaskData?.leftData?.critical, label: true },
									{ name: '高危', stack: 'total', value: webSecTaskData?.leftData?.high, label: true },
									{ name: '中危', stack: 'total', value: webSecTaskData?.leftData?.medium, label: true },
									{ name: '低危', stack: 'total', value: webSecTaskData?.leftData?.low, label: true },
								]
							}, 'bar')} />
						</div>
						<div className="w50p ml20 black-line-color df jcsb fdc h100p bsbb">
							<div className="bg-color fs14 fw700 lh40 df aic jcsb pt10 pb10 pl16 pr16">
								<span>威胁总数</span>
								<span className="error-color fs20 fw700">{toThousands(webSecTaskData?.risk_count || 0)}</span>
							</div>
							<div className="df aic flex1 h100p mt16">
								<div className={cn("h100p w50p mr8 bg-color p10 pr16 pl16 fs12 secondary-color df fdc", s.vulBg)}>
									<div className="fs14 fw700 df aic jcsb black-line-color mb5">
										<span>漏洞数</span>
										<span className="error-color fs20 fw700">{toThousands(webSecTaskData?.rightData?.vul?.count || 0)}</span>
									</div>
									{webSecTaskData?.rightData?.vul?.count > 0 ? <>
										{(webSecTaskData?.rightData?.vul?.count > 2 ? webSecTaskData?.rightData?.vul?.data?.concat(['……']) : webSecTaskData?.rightData?.vul?.data)?.map(item => {
											return <div className="lh24" dangerouslySetInnerHTML={{ __html: item }}></div>
										})}
									</> : <div className="tac mt20 pt20">暂无数据</div>}
								</div>
								<div className={cn("h100p w50p bg-color p10 pr16 pl16 fs12 secondary-color df fdc", s.securityBg)}>
									<div className="fs14 fw700 df aic jcsb black-line-color mb5">
										<span>安全事件数</span>
										<span className="error-color fs20 fw700">{toThousands(webSecTaskData?.rightData?.securityEvent?.count || 0)}</span>
									</div>
									{webSecTaskData?.rightData?.securityEvent?.count > 0 ? <>
										{(webSecTaskData?.rightData?.securityEvent?.count > 2 ? webSecTaskData?.rightData?.securityEvent?.data?.concat(['……']) : webSecTaskData?.rightData?.securityEvent?.data).map(item => {
											return <div className="lh24" dangerouslySetInnerHTML={{ __html: item }}></div>
										})}
									</> : <div className="tac mt20 pt20">暂无数据</div>}
								</div>
							</div>
						</div>
					</div>
					<div className="mt10">
						*更多资产风险信息，请<span className="main-color cp" onClick={() => linkTo('/')}>前往控制台</span>查看
					</div>
				</div> : <div className="flex1 df fdc">
					<div className={cn(s.warningTip)}>{warningTipMap[type].web_2}</div>
					<div className={cn(s.webEmpty2, 'mt16 bg-color')}></div>
				</div>}
			</div>
			<div className={cn(s.minH518, {[s.h518]: type !== 4 && taskType?.ava}, 'bgwh pl24 pr24 pt16 df fdc pb16 mt24')}>
				<div className={cn('black-line-color fs20 fw700')}>可用性监测</div>
				{type !== 4 && taskType?.ava ? <div className="flex1 mt10 df fdc">
					<div className="df aifs flex1 fdc">
						<div className="bd flex1 mt10 w100p p20">
							<div className='h50p' style={{ height: '169px'}}>
								<ECharts key='asset-count' option={initECharts({
									options: option => {
										option.title = { show: false }
										option.tooltip = { show: false }
										option.xAxis = {
											show: true,
											axisTick: {
												show: false
											},
											data: webAvailableTaskData?.[0]?.draw_data?.date_list || []
										}
										option.grid = {
											left: '1%',
											right: '2%',
											bottom: 0,
											top: '24%',
											containLabel: true
										}
										option.yAxis = {
											show: true,
											axisTick: {
												show: false
											},
											max: 1,
											axisLabel: {
												formatter: value => value * 100 + '%'
											}
										}
										option.legend = {
											show: true,
											itemWidth: 20,
											itemHeight: 10,
											right: '2%',
											top: '5%',
											data: webAvailableTaskData?.map(item => { return item.name })
										}
										return option
									},
									color: [{color1: '#FF0000'}, {color1: '#F67E23'}, {color1: '#FED831'}], // 多个 与dataKey对应
									dataKey: webAvailableTaskData?.map(item => {
										return { name: item.name, show: true, value: item?.draw_data?.date_avg_list, symbolSize: 4, showAllSymbol: false }
									})
								}, 'line')} />
							</div>
							<Table className='small-table avaTaskTable mt10' pro columns={colum} data={webAvailableTaskData} />
						</div>
					</div>
					<div className="mt10">
						*可用性监测优先展示HTTP监测数据，更多资产风险信息，请<span className="main-color cp" onClick={() => linkTo('/')}>前往控制台</span>查看
					</div>
				</div> : <div className="flex1 df fdc">
					<div className={cn(s.warningTip)}>{warningTipMap[type].ava}</div>
					<div className={cn(s.avaEmpty, 'mt16 bg-color')}></div>
				</div>}
			</div>
			<div className={cn(s.h380, 'bgwh pl24 pr24 pt16 df fdc pb16 mt24 mb24')}>
				<div className="df fdc flex1">
					<div className="df aic jcsb">
						<div className={cn('black-line-color fs20 fw700')}>漏洞插件信息</div>
						<div className={cn("bg-color pl16 pr16 pt10 pb10 df aic jcsb black-line-color fw700")}>
							<span>漏洞库总数</span>
							<span className="ml10 main-color fs20">{toThousands(kbData?.total)}</span>
						</div>
					</div>
					<div className="flex1">
						<Table
							empty={<EmptyData borderless />}
							className='small-table mt10 avaTaskTable' pro columns={kbColumns} data={kbData?.tableData} />
					</div>
					<div className="mt10">
						<div>*更多资产风险信息，请<span className="main-color cp" onClick={() => linkTo('/')}>前往控制台</span>查看</div>
					</div>
				</div>
			</div>
			<div className={cn(s.footContent)}>
				<div>如果您在使用过程中遇到问题，请联系相关工作人员。</div>
			</div>
		</div>
	</div> : hasUser === 0 ? <div>
		<div className={cn("bd tac p20", s.userNameForm)}>
			<h3>输入用户名</h3>
			<Input className='mt20 mb20' value={username} onChange={({value: username}) => setUsername(username)} />
			<Button type='primary' disabled={!username} onClick={() => getAvaTaskData()}>确认</Button>
		</div>
	</div> : <div></div>
}

export default TaskReport;
